<template>
  <div class="my">
    <div class="my-hall"></div>
    <div class="my-content">
      <!--   已登录   -->
      <div class="content-user" @click="handleUserClick('edit')" v-if="myModule.userInfo.id">
        <div class="user-left">
          <img :src="myModule.userInfo.photo || defaultAvatar" alt="avatar">
          <span>{{ myModule.userInfo.nickName }}</span>
        </div>
        <div class="user-right">修改信息></div>
      </div>
      <!--   未登录   -->
      <div class="content-user" @click="handleUserClick('login')" v-else>
        <div class="user-left">
          <img :src="defaultAvatar" alt="avatar">
          <span>请先登录</span>
        </div>
        <div class="user-right">立即登录></div>
      </div>
      <!--   订单模块   -->
      <div class="content-order">
        <div class="order-top">
          <div class="top-left">我的订单</div>
          <div class="top-right" @click="$router.push('/order')">全部订单></div>
        </div>
        <div class="order-bottom">
          <div
              class="bottom-item"
              v-for="item in orderMenuItems"
              :key="item.key"
              @click="$router.push('/order?status=' + item.key)"
          >
            <img :src="item.icon" alt="icon">
            <div class="item-word">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <!--   功能列表   -->
      <div class="content-function">
        <template v-for="item in myFunctionItems" :key="item.key">
          <ZJFunctionItem @click.native="handleFunctionClick(item.key)" :word="item.label"/>
        </template>
      </div>
      <!--   底部退出登录   -->
      <div class="content-btn-wrapper" v-if="myModule.userInfo.id">
        <van-button @click="handleLogout" class="exit-login-btn" round block type="primary">
          退出登录
        </van-button>
      </div>
    </div>
    <!--  登录注册入口  -->
    <router-view v-slot="{Component}">
      <keep-alive>
        <component :is="Component"/>
      </keep-alive>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import {nextTick, onBeforeUnmount, onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";

import useMyModule from "@/store/myModule";
import {orderMenuItems, myFunctionItems} from './config'
import defaultAvatar from "@/assets/images/default_avatar.jpg"
import ZJFunctionItem from './MyFunctionItem/MyFunctionItem.vue'

const router = useRouter()
const myModule = useMyModule()
// 用户行点击
const isLogin = ref(false)
const handleUserClick = (type: string) => {
  if (type === "login") {
    router.push("/my/enter")
  } else {
    router.push("/my/edit")
  }
}
// 退出登录
const handleLogout = async () => {
  const isExit = await myModule.logoutAction()
  if (isExit) {
    isLogin.value = false
  }
}
const handleFunctionClick = (path: string) => {
  router.push(path)
}
// 每次进入初始化用户信息（为什么不用onActive？ 因为他无法监听go(-1)）
onMounted(() => {
  isLogin.value = myModule.userInfo.id !== 0;
})
const route = useRoute()
// 初始化个人信息
const setupMyInfo = async () => {
  await myModule.setupMyAction()
  isLogin.value = !!myModule.userInfo.id
}
const stopWatch = watch(route, async () => {
  if (route.path === "/my") {
    await setupMyInfo()
  }
})
// 卸载后停止监听
onBeforeUnmount(() => {
  stopWatch()
})
</script>

<style scoped lang="less">
@import "src/assets/css/variable";
@import "src/assets/css/mixins";

.my {
  position: relative;

  .my-hall {
    height: 150px;
    background-color: @theme-color;
  }

  .my-content {
    padding: 0 20px;
    position: absolute;
    top: 40px;
    width: 100%;
    box-sizing: border-box;

    .content-user {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .user-left {
        display: flex;
        align-items: center;
        color: #fff;

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }

      .user-right {
        color: #fff;
      }
    }

    .content-order {
      margin-top: 20px;
      padding: 12px;
      border-radius: 10px;
      background-color: #fff;

      .order-top {
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 4px;

        .top-left {
          font-size: 16px;
          font-weight: 600;
        }

        .top-right {
          color: #999;
          font-size: 14px;
        }
      }

      .order-bottom {
        display: flex;
        margin-top: 12px;
        justify-content: space-between;

        .bottom-item {
          text-align: center;

          .item-word {
            font-size: 14px;
          }
        }
      }
    }

    .content-function {
      border-radius: 10px;
      margin-top: 20px;
      overflow: hidden;

      .exit-login-btn {
        margin: 20px;
      }
    }

    .content-btn-wrapper {
      padding: 20px;
    }
  }
}
</style>
